<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="api.css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>
    <title>测试接口</title>
    <style></style>
</head>

<body>
    <div id="api">
        <div class="left">
            <form class="bs-example bs-example-form" role="form">
                <div class="input-group">
                    <input type="text" class="filter" placeholder="  Filter..." width="50px">
                </div>
            </form>
            <div class="user">
                <a href="#right_two">
                    <b>User</b>
                </a>
            </div>
            <div class="login">
                <a href="#right_three">用户登录接口</a>
            </div>
        </div>
        <div class="right">
            <div id="right_one">
                <h1>mysails</h1>
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
					<b>1.0.0</b>
					<span class="caret"></span>
				</button>
                </div>
                <h2> xun's test project</h2>
                <div class="devide"></div>
            </div>
            <div id="right_two">
                <span class="user_head">User</span>
                <div class="login_button">
                    <span class="login_button_left">
                    User - 用户登录接口
                </span>
                    <div class="login_button_right">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
							<span class="login_button_right_span">0.0.0</span>
							<span class="caret"></span>
						</button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                                <li role="presentation" class="disabled">
                                    <a role="menuitem" tabindex="-1" href="#">与较早的版本比较</a>
                                </li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#">0.0.0</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="get">GET</div>
                <div class="black_login">/login</div>
            </div>
            <div id="right_three">
                <table class="table table-bordered">
                    <caption class="table1_head">参数</caption>
                    <tbody>
                        <tr class="info">
                            <td>字段</td>
                            <td>类型</td>
                            <td>描述</td>
                        </tr>
                        <tr>
                            <td>account</td>
                            <td>text</td>
                            <td>账号</td>
                        </tr>
                        <tr>
                            <td>account</td>
                            <td>text</td>
                            <td>账号</td>
                        </tr>
                        <tr>
                            <td>account</td>
                            <td>text</td>
                            <td>账号</td>
                        </tr>
                        <tr>
                            <td>account</td>
                            <td>text</td>
                            <td>账号</td>
                        </tr>
                        <tr>
                            <td>account</td>
                            <td>text</td>
                            <td>账号</td>
                        </tr>
                    </tbody>
                </table>
                <table class="table table-bordered">
                    <caption class="table1_head">sucess200</caption>
                    <tbody>
                        <tr class="info">
                            <td>字段</td>
                            <td>类型</td>
                            <td>描述</td>
                        </tr>
                        <tr>
                            <td>firstname</td>
                            <td>String</td>
                            <td>Firstname of the User.</td>
                        </tr>
                        <tr>
                            <td>firstname</td>
                            <td>String</td>
                            <td>Firstname of the User.</td>
                        </tr>
                        <tr>
                            <td>firstname</td>
                            <td>String</td>
                            <td>Firstname of the User.</td>
                        </tr>
                        <tr>
                            <td>firstname</td>
                            <td>String</td>
                            <td>Firstname of the User.</td>
                        </tr>
                    </tbody>
                </table>
                <div class="sucess_response">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>
                    </ul>
                </div>
                <div class="black_pannel">
                    <div class="pannel_code">
                        <span class="code_white">HTTP/</span><span class="code_blue">1.1&nbsp;&nbsp;200</span><span class="code_white">&nbsp;&nbsp;OK </span><br>
                        <span class="code_white">{</span><br> &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="code_green">"firstname"</span><span class="code_white">：</span>
                        <span class="code_green">"John"</span>,<br> &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="code_green">"lastname"</span><span class="code_white">：</span><span class="code_green">"Doe"</span><br>
                        <span class="code_white">}</span><br>
                    </div>
                </div>
                <div class="devide"></div>
                <div class="right_bottom">
                    <span class="word_gray">基于</span> <span class="word_blue">apidoc</span> <span class="word_gray">0.17.6 - 2017-10-23T07:53:37.619Z</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $.get("api.json", function(data) {
        console.log(data);
        window.vm = new Vue({
            el: '#api',
            data: {

            }
        });
    });
</script>

</html>